<template>
  <a-card class="device-page-left">
    <DistributeSearch @distributeSearch="distributeSearch" />
    <div class="flex w-full gap-2 my-4" v-if="loaded">
      <div class="grid flex-grow gap-2 content">
        <a-list
          item-layout="horizontal"
          :data-source="showMessageList"
          bordered
        >
          <template #renderItem="{ item }">
            <a-list-item
              @click="itemClick(item)"
              class="bg-white border cursor-pointer scale"
            >
              <a-list-item-meta :description="'原因： ' + item.reason">
                <template #title>
                  <span>{{
                    item.department ? "部门：" + item.department : ""
                  }}</span>
                </template>
                <template #avatar>
                  <a-tag color="green">分发</a-tag>
                </template>
              </a-list-item-meta>
              <div class="content">数量： {{ item.qty }}</div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
    <div class="flex justify-end" v-if="loaded">
      <a-pagination
        class=""
        :show-size-changer="false"
        :current="current"
        :pageSize="10"
        :total="messageLength"
        @change="sizeChange"
      />
    </div>
    <div v-else class="flex items-center justify-center bg-gray-200 h-96">
      <a-spin size="large" />
    </div>
  </a-card>
</template>

<script lang="ts">
import DistributeSearch from "@/components/search/DistributeSearch.vue";
import { listMessage, searchMessage } from "@/controller/Cloud";
import { DistributeMessage, SearchMessageForm } from "model";
import { useRouter } from "vue-router";
import { computed, defineComponent, onBeforeMount, ref } from "vue";

export default defineComponent({
  name: "DevicePageLeft",
  components: {
    DistributeSearch,
  },
  setup() {
    const search = ref();
    const messageList = ref<Array<DistributeMessage>>([]);
    const router = useRouter();
    const loaded = ref<boolean>(false);

    onBeforeMount(async () => {
      loaded.value = false;
      messageList.value = await listMessage();
      loaded.value = true;
    });
    const current = ref<number>(1);
    const messageLength = computed(() => messageList.value.length);
    const pageLength = computed(() => Math.ceil(messageLength.value / 10));
    const showMessageList = computed(() => {
      return messageList.value.slice(
        (current.value - 1) * 10,
        current.value * 10
      );
    });
    const sizeChange = (cur: number) => {
      current.value = cur;
    };
    const distributeSearch = async (searchForm: SearchMessageForm) => {
      current.value = 1;
      loaded.value = false;
      messageList.value = await searchMessage(searchForm);
      loaded.value = true;
    };
    const itemClick = (item: DistributeMessage) => {
      router.push({
        name: "DeviceDetail",
        params: {
          id: item.equipmentId,
        },
      });
    };
    return {
      loaded,
      search,
      distributeSearch,
      messageList,
      current,
      messageLength,
      showMessageList,
      sizeChange,
      pageLength,
      itemClick,
    };
  },
});
</script>

<style scoped lang="scss"></style>
